<!DOCTYPE html>
<html>

<head>
    <title>Example</title>
    <base href="">
    <meta name="author" content="Adam Freeman">
    <meta name="description" content="A simple example">
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
    <style>
        .fruit {
            border: thin solid black;
            padding: 1px;
        }
    </style>
</head>

<body>
    <!-- 文本层面元素 -->
    <!-- 绝对URL -->
    I like <a href="http://en.wikipedia.org/wiki/Apples">apples</a> and
    <a href="http://en.wikipedia.org/wiki/Orange_(fruit)">oranges</a>.
    <!-- 相对URL -->
    You can see other fruits I like <a href="./HTML_基本结构.html">here</a>.
    <!-- 生成内部超链接 找id 找name -->
    You can see other fruits I like <a href="#fruits">here</a>.
    <p id="fruits">
        I also like bananas, mangoes, cherries, apricots, plums, peaches and grapes.
    </p>
    <!-- a的target属性告诉浏览器希望将所链接的资源显示在哪里 -->
    <!-- b元素用来标记一段文字，但不再具有呈现性质的含义 -->
    <!-- em元素表示对一段文字的强调 -->
    <em>I</em> like <b>apples</b> and <b>oranges</b>.
    <!-- i元素表示一段文字与周围内容有本质区别（外文词语或科技术语） -->
    My favorite kind of orange is the mandarin, properly known as <i>citrus reticulata</i>.

    <!-- s元素表示一段文字不再正确 -->
    Oranges at my local store cost <s>$1 each</s> $2 for 3.
    <!-- strong 表示一段重要文字，u为文字添加下划线 -->
    <strong>Warning:</strong> Eating <u>too many</u> oranges can give you heart burn.
    <!-- small 添加小号字体内容，常用于免责声明和澄清声明 -->
    Oranges at my local store are $1 each <small>（plus tax)</small>
    <!-- 添加上标和下标 sup sub-->
    The point x<sub>10</sub> is the 10<sup>th</sup> point.
    <!-- 换行元素br(一次换行) wbr(表示可以安全换行的建议位置，换不换由浏览器决定) -->
    I WANDERED lonely as a cloud<br />
    That floats on high o'er vales and hills,<br />
    When all at once I saw a crowd,<br>
    A host, of golden daffodils;
    <br />
    This is a very very long word: Super<wbr>califragilstic<wbr>expoalidocious.
    We can help the browser display long words with the <code>wbr</code> element.
    <!-- 表示计算机的输入和输出 code var samp kbd-->
    <p>
        <code>var fruits = ["apples","oranges","mangoes","cherries"];<br>
            document.writeln("I like " + fruits.length + " fruits");</code>
    </p>
    <p>The variable in this example is <var>fruits</var></p>
    <p>the output from the code is : <samp>I like 4 fruits</samp></p>
    <p>When prompted for my favorite fruit, I typed: <kbd>cherries</kbd></p>

    <!-- abbr 表示缩写 -->
    The <abbr title="Florida Department of Citrus">FDOC</abbr> regulates the Florida citrus industry.
    <!-- dfn 定义术语 -->
    <p>
        The <dfn title="apple">apple</dfn> is the pomaceous fruit of the apple tree,
        species Malus domestica in the rose family.
    </p>
    <!-- q 引用来自他处的内容 -->
    <p>
        <q cite="http://en.wikipedia.org/wiki.Apple">The <dfn title="apple">apple</dfn> is the pomaceous fruit of the
            apple tree,
            species Malus domestica in the rose family.</q>
    </p>
    <!-- cite 引用作品 -->
    My favorite book on fruit is <cite>Fruit: Edible, Inedible, Incredible</cite>
    by Stuppy & Kesseler
    <br>
    <!-- ruby注音符号，帮助读者掌握文字正确梵音的符号-->
    <ruby>魑<rp>(</rp>
        <rt>chī</rt>
        <rp>)</rp>
    </ruby>
    <ruby>魅<rp>(</rp>
        <rt>mèi</rt>
        <rp>)</rp>
    </ruby>
    <ruby>魍<rp>(</rp>
        <rt>wǎng</rt>
        <rp>)</rp>
    </ruby>
    <ruby>魉<rp>(</rp>
        <rt>liǎng</rt>
        <rp>)</rp>
    </ruby>
    <!-- bdo元素，明确指定内容文字方向 -->
    <br>
    <p>This is left-to-right: <bdo dir="ltr">I Like oranges</bdo></p>
    <p>This is right-to-left: <bdo dir="rtl">I Like oranges</bdo></p>
    <!-- bdi元素,表示一段出于文字方向考虑而与其他内容隔离开来的文字 -->
    <!-- span,表示一段一般性的内容 -->
    I like <span class="fruit">apples</span> and <span class="fruit">oranges</span>.
    <!-- 突出显示文本 -->
    <p>
        I would like a <mark>pair</mark> of <mark>pears</mark>
    </p>
    <!-- ins/del 表示文档中添加/删除的文字 -->
    <p>
        <del>I can <mark>sea</mark> the <mark>see</mark></del>
        <ins>I can <mark>see</mark> the <mark>sea</mark></ins>
    </p>
    <!-- time表示时间和日期 -->
    I still remember the best apple I ever tasted.
    I bought it at <time datetime="15:00">3 o'clck</time>
    on <time datetime="1984-12-7">December 7th</time>.
</body>

</html>